<!--  -->
<template>
  <div class="cart_box" v-for="item in cartList" :key="item.id">
    <div class="cart_left">
      <van-checkbox
        v-model="item.checked"
        @click.stop="changeCheck(item)"
      ></van-checkbox>
    </div>
    <div class="cart_right">
      <div class="left">
        <img :src="item.list_pic_url" alt="" />
      </div>
      <div class="right">
        <div class="right_top">
          <div>{{ item.goods_name }}</div>
          <div class="p">
            <div class="top_left" style="font-size: 16px">
              ￥{{ item.market_price }}.00
            </div>
            <div class="top_right">x{{ item.number }}</div>
          </div>
        </div>
        <div class="right_bottom">
          <van-stepper v-model="item.number" @change="numChange(item)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, defineComponent, onMounted } from "vue";
import { goodsSelectApi, getStepData } from "@/api/api.ts";
export default defineComponent({
  emits: ["change", "setChange", "checkedChange"],
  props: {
    cartList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  setup(props, { emit }) {
    let checked = ref(false);
    const changeCheck = (item) => {
      console.log(item);
      if (item.checked === false) {
        emit("checkedChange", false);
      }
      goodsSelectApi({
        isChecked: item.checked == false ? 0 : 1,
        productIds: item.product_id,
      }).then((res) => {
        res["aaaaa"] = "aaaaaaaaaaaa";
        emit("change", res);
      });
    };
    const numChange = (item) => {
      getStepData({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        emit("setChange", res);
      });
    };
    return {
      checked,
      changeCheck,
      numChange,
    };
  },
});
</script>

<style lang="scss" scoped>
.cart_box {
  width: 100%;
  background-color: #fff;
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid #ccc;
}
.cart_left {
  width: 10%;
  display: flex;
}
.cart_right {
  width: 90%;
  background-color: #fafafa;
  padding: 16px 32px;
  display: flex;
  width: 100%;
}
.right {
  width: 70%;
}
.right .right_top {
  display: flex;
  flex-flow: column;
  height: 176px;
  justify-content: space-between;
}
.right .right_top .p {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.cart_right .left {
  width: 176px;
  height: 176px;
}
.cart_right .left img {
  width: 100%;
  height: 100%;
}
.right .right_bottom {
  display: flex;
  justify-content: flex-end;
}
</style>
